<template>
  <view class="gongwei">
    <view class="gong-item">
      <view class="star-list">
        <template v-for="(item, index) in gongResult.starsList">
          <view class="star-item" v-if="item.starLevel != 6" :key="index">
            <view class="star-name">
              <template v-for="(e, i) in item.starName">
                <view class="main-star" :style="clickSihuaStyle(item.clickSihua)" v-if="item.starLevel == 1" :key="i">{{e}}</view>
                <view class="deputy-star" :style="clickSihuaStyle(item.clickSihua)" v-else :key="i">{{e}}</view>
              </template>
            </view>
            <view v-if="item.siHuaXing" class="star-benming-sihua" :style="sihuaStyle(item.siHuaXing, '0')" >{{ item.siHuaXing }}</view>
            <view v-else class="star-benming-sihua-null"></view>
            <view v-if="liunianIndex != undefined" class="star-liunian-sihua" :style="sihuaStyle(liunianSihua(item.starName), '1')" >{{ liunianSihua(item.starName) }}</view>
            <view v-else class="star-benming-sihua-null"></view>
          </view>          
        </template>
      </view>
      <view class="bottom-info">
        <view class="left">
          <template v-if="showType=='daxian'">
            <view class="gong-liunian">{{ daxianGongweiSui(gongResult.gongDiZhi) }}</view>
            <view class="gong-liunian">{{ daxianGongweiNian(gongResult.gongDiZhi) }}</view>            
          </template>
          <template v-if="showType=='liunian'">
            <view class="gong-liunian yue">{{ liunianYue(gongResult.gongDiZhi) }}</view>
            <view class="gong-liunian"><span class="gong-liunian-unit">年</span>{{ liunianGongweiName(gongResult.gongDiZhi) }}</view>
          </template>
          <view class="gong-liunian">
            <view><span class="gong-liunian-unit">大</span>{{ daxianGongweiName(gongResult.gongDiZhi) }}</view>
          </view>
        </view>
        <view class="center">
          <view class="gong-age">{{ gongResult.timeRangeName }}</view>
          <view class="gong-name">{{ gongResult.gongName }}</view>
        </view>
        <view class="right">
          <view class="shen-gong" v-if="gongResult.isShenGong == true">
            <view>身</view>
            <view>宫</view>
          </view>
          <view class="laiyin-gong" v-if="gongResult.isLaiYinGong == true">
            <view>来</view>
            <view>因</view>
          </view>
          <view>{{ gongResult.gongTianGan }}</view>
          <view>{{ gongResult.gongDiZhi }}</view>
        </view>        
      </view>
      <view :class="(gongIndex == '3' || gongIndex == '4' || gongIndex == '9' || gongIndex == '10') ? 'arrow-box-col' : 'arrow-box'">
        <image class="arrow" :style="neisihua(gongIndex)" v-if="gongzihua(gongResult, '禄', 'nei')" src="@/static/images/zwds/lu.png"></image>
        <image class="arrow" :style="neisihua(gongIndex)" v-if="gongzihua(gongResult, '权', 'nei')" src="@/static/images/zwds/quan.png"></image>
        <image class="arrow" :style="neisihua(gongIndex)" v-if="gongzihua(gongResult, '科', 'nei')" src="@/static/images/zwds/ke.png"></image>
        <image class="arrow" :style="neisihua(gongIndex)" v-if="gongzihua(gongResult, '忌', 'nei')" src="@/static/images/zwds/ji.png"></image>
      </view>
      <view :class="(gongIndex == '3' || gongIndex == '4' || gongIndex == '9' || gongIndex == '10') ? 'arrow-box-col' : 'arrow-box'">
        <image class="arrow" :style="waisihua(gongIndex)" v-if="gongzihua(gongResult, '禄', 'wai')" src="@/static/images/zwds/lu.png"></image>
        <image class="arrow" :style="waisihua(gongIndex)" v-if="gongzihua(gongResult, '权', 'wai')" src="@/static/images/zwds/quan.png"></image>
        <image class="arrow" :style="waisihua(gongIndex)" v-if="gongzihua(gongResult, '科', 'wai')" src="@/static/images/zwds/ke.png"></image>
        <image class="arrow" :style="waisihua(gongIndex)" v-if="gongzihua(gongResult, '忌', 'wai')" src="@/static/images/zwds/ji.png"></image>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    props: {
      type: {
        type: String,
        default: 'daxian'
      },
      gongIndex: {
        type: String,
        default: ''
      },
      feixinggong: {
        type: Object,
        default: ()=>{ return {} }
      },
      daxian: {
        type: Object,
        default: ()=>{ return {} }
      },
      liunianIndex: {
        type: Number,
        default: undefined
      }
    },
		watch: {
			feixinggong: {
				handler(newVal) {
          this.gongResult = newVal;
				},
				deep: true,
        immediate: true
			}
		},
    computed: {
      daxianResult: function() {
        return this.daxian;
      },
      showType: function() {
        return this.type;
      }
    },
    data() {
      return {
        gongResult: this.feixinggong,
        sihuaColor:{
          '禄': {
            color: '#00BA7D'
          },
          '权': {
            color: '#821883'
          },
          '科': {
            color: '#007CD4'
          },
          '忌': {
            color: '#890202'
          }
        }
      }
    },
    methods: {
      benmingSihua(sihua) {
        let item = this.gongResult.gongZiHuaList.find(e => e.ziHuaXing == sihua);
        if (item) return item.zihuaName;
        return ''
      },
      liunianSihua(starName) {
        let item = this.daxianResult.ziWeiLiuNian[this.liunianIndex].ziHuaStar.find(e => e.starName == starName);
        if (item) return item.siHuaXing;
        return '';          
      },
      daxianGongweiSui(dizhi) {
        let item = this.daxianResult.gongweiNianAndAge.find(e => Object.keys(e).includes(dizhi));
        if (item) return item[dizhi][0] + '岁';
        return '';
      },
      daxianGongweiNian(dizhi) {
        let item = this.daxianResult.gongweiNianAndAge.find(e => Object.keys(e).includes(dizhi));
        if (item) return item[dizhi][1];
        return '';
      },
      daxianGongweiName(dizhi) {
        let item = this.daxianResult.gongweiNames.find(e => Object.keys(e).includes(dizhi));
        if (item) return item[dizhi];
        return '';
      },
      liunianYue(dizhi) {
        let item = this.daxianResult.ziWeiLiuNian[this.liunianIndex].ziWeiLiuYue.find(e => e.gongAtDizi == dizhi);
        if (item) return item.monthName + item.ganzhi[0];
        return '';
      },
      liunianGongweiName(dizhi) {
        let item = this.daxianResult.ziWeiLiuNian[this.liunianIndex].gongweiNames.find(e => Object.keys(e).includes(dizhi));
        if (item) return item[dizhi];
        return '';
      },
      clickSihuaStyle(sihua) {
        if (sihua) {
          return `color: #FFF;background-color: ${this.sihuaColor[sihua].color}`
        }
      },
      sihuaStyle(sihua, type) {
        if (sihua) {
          if (type == '0') {
            return `color: #FFF;background-color: ${this.sihuaColor[sihua].color}`
          }else{
            return `background-color: #FFF;color: ${this.sihuaColor[sihua].color}; border: 2rpx solid ${this.sihuaColor[sihua].color}`
          }          
        }
      },
      neisihua(index) {
        let num = parseInt(index);
        let arr = [
          // 0
          {
            bottom: '24rpx',
            right: '0',
            rotate: '335deg'
          },
          // 1
          {
            bottom: '24rpx',
            right: '0',
            rotate: '25deg'
          },
          // 2
          {
            bottom: '24rpx',
            right: '-54%',
            rotate: '45deg'
          },
          // 3
          {
            bottom: '0',
            right: '-104%',
            rotate: '65deg'
          },
          // 4
          {
            bottom: '0',
            right: '-104%',
            rotate: '115deg'
          },
          // 5
          {
            bottom: '-100%',
            right: '-55%',
            rotate: '135deg'
          },
          // 6
          {
            bottom: '-100%',
            right: '0',
            rotate: '155deg'
          },
          // 7
          {
            bottom: '-100%',
            right: '0',
            rotate: '205deg'
          },
          // 8
          {
            bottom: '-100%',
            right: '54%',
            rotate: '225deg'
          },
          //9
          {
            bottom: '0',
            right: '22rpx',
            rotate: '245deg'
          },
          //10
          {
            bottom: '0',
            right: '22rpx',
            rotate: '295deg'
          },
          //11
          {
            bottom: '24rpx',
            right: '56%',
            rotate: '315deg'
          }
        ]
        let { bottom, right, rotate } = arr[num]
        return `bottom: ${bottom};right: ${right};transform: rotate(${rotate})`
      },
      gongzihua(data, type, category) {
        let item = data.gongZiHuaList.find(e => e.zihuaName == type);
        if (item) {
          if ((type && category == 'nei' && item.benGong == false )|| (type && category == 'wai' && item.benGong == true )) {
            return true
          }          
        }
        return false
      },
      waisihua(index) {
        let num = parseInt(index);
        let arr = [
          // 0
          {
            bottom: '-100%',
            right: '0',
            rotate: '165deg'
          },
          // 1
          {
            bottom: '-100%',
            right: '0',
            rotate: '195deg'
          },
          // 2
          {
            bottom: '-100%',
            right: '54%',
            rotate: '215deg'
          },
          // 3
          {
            bottom: '0',
            right: '22rpx',
            rotate: '245deg'
          },
          // 4
          {
            bottom: '0',
            right: '22rpx',
            rotate: '295deg'
          },
          // 5
          {
            bottom: '24rpx',
            right: '54%',
            rotate: '325deg'
          },
          // 6
          {
            bottom: '24rpx',
            right: '0',
            rotate: '345deg'
          },
          // 7
          {
            bottom: '24rpx',
            right: '0',
            rotate: '15deg'
          },
          // 8
          {
            bottom: '24rpx',
            right: '-54%',
            rotate: '35deg'
          },
          //9
          {
            bottom: '0',
            right: '-104%',
            rotate: '65deg'
          },
          //10
          {
            bottom: '0',
            right: '-104%',
            rotate: '115deg'
          },
          //11
          {
            bottom: '-100%',
            right: '-54%',
            rotate: '145deg'
          }
        ]
        let { bottom, right, rotate } = arr[num]
        return `bottom: ${bottom};right: ${right};transform: rotate(${rotate})`
      }
    }
  };
</script>

<style lang="scss" scoped>
  .gongwei {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .gong-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    position: relative;
    padding: 4rpx;
    .star-list {
      height: 104rpx;
      display: flex;
      flex-direction: row;
      .star-item {
        display: flex;
        flex-direction: column;
        .star-name {
          display: flex;
          flex-direction: column;
          font-size: 26rpx;
          line-height: 26rpx;
          .main-star {
            color:#f84b43;
          }
          .deputy-star {
            color: #821883;
          }
        }
      }      
    }
    .arrow-box {
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      flex-direction: row;
      justify-content: center;
      right: 0;
      bottom: 0;
    }
    .arrow-box-col {
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: center;
      right: 0;
      bottom: 0;
    }
    .arrow {
      width: 15rpx;
      height: 24rpx;
    }
    .bottom-info {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .left {
        width: 60rpx;
        color: #007CD4;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        .gong-liunian {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          font-size: 24rpx;
          line-height: 18rpx;
          transform-origin: left top;
          transform: scale(0.7);
          white-space: nowrap;
          .gong-liunian-unit {
            padding-right: 4rpx;
          }
        }
        .yue {
          color: #ECAB47;
        }
      }
      .center {
        width: 80rpx;
        color: #2C2C2C;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        .gong-age {
          font-size: 24rpx;
          line-height: 24rpx;
          transform: scale(0.8);
          transform-origin: left;
          white-space: nowrap;
        }
        .gong-name {
          font-size: 24rpx;
          line-height: 24rpx;
        }
      }
      .right {
        font-size: 24rpx;
        line-height: 24rpx;
        color: #2C2C2C;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: relative;
        .shen-gong {
          font-size: 20rpx;
          position: absolute;
          bottom: 56rpx;
          right: 30rpx;
          color: #890202;
          border-radius: 6rpx;
          border: 2rpx solid #890202;
          box-sizing: border-box;
        }
        .laiyin-gong {
          font-size: 20rpx;
          position: absolute;
          bottom: 56rpx;
          color: #890202;
          border-radius: 6rpx;
          border: 2rpx solid #890202;
          box-sizing: border-box;
        }
      }
    }
  }
  .star-benming-sihua {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20rpx;
    height: 28rpx;
    line-height: 28rpx;
    border-radius: 6rpx;
    box-sizing: border-box;
  }
  .star-liunian-sihua {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20rpx;
    height: 28rpx;
    line-height: 28rpx;
    border-radius: 6rpx;
    box-sizing: border-box;
  }
  .star-benming-sihua-null {
    display: flex;
    flex-shrink: 0;
    font-size: 20rpx;
    height: 28rpx;
    line-height: 28rpx;
    box-sizing: border-box;
  }
</style>